<template>
	<view class="box">
		<view class="header">
			<view class="header_left" @click="go">
				<image src="https://s1.ax1x.com/2022/12/03/zrnYhF.jpg" mode=""></image>
				返回
			</view>
			<view class="header_center">
				添加保修
			</view>
		</view>
		<view class="form">
			<view class="form_one">
				<view class="left">
					类型
				</view>
				<view class="right">
					<picker :range="typelist" :range-key="'name'" @change="changetype">
						<view>{{addData.typeName}}
							<image src="https://s1.ax1x.com/2022/12/03/zrQgat.jpg" mode=""></image>
						</view>
					</picker>
				</view>
			</view>
			<view class="form_one">
				<view class="left">
					保修地址
				</view>
				<view class="right">
					<picker :range="buildingname" :range-key="'building'" @change="changebuilding">
						<view>{{addData.address}}
							<image src="https://s1.ax1x.com/2022/12/03/zrQgat.jpg" mode=""></image>
						</view>
					</picker>
				</view>
			</view>
			<view class="form_one" style="border-bottom: none;">
				<view class="left">
					联系电话
				</view>
				<view class="right">
					<input type="text" placeholder="请填写联系方式" maxlength="11" v-model="addData.tel">
					<image src="https://s1.ax1x.com/2022/12/03/zrQgat.jpg" mode=""></image>
				</view>
			</view>
			<view class="text">
				<textarea name="" id="" cols="300" rows="100" v-model="addData.content"
					placeholder="请输入报修问题,以便维修人员尽快为您解决"></textarea>
			</view>
			<view class="li">
				<uploadImg @upload="upload"></uploadImg>
			</view>
		</view>
		<view class="btu" @click="add">
			确认维修
		</view>
	</view>
</template>

<script>
	import uploadImg from '../../../components/uploadImg/uploadImg.vue';
	import {repairstypelist,houseCheck,addrepairs} from '../../../utils/api.js'
	export default {
		components:{
			uploadImg
		},
		data() {
			return {
				typelist:[],
				buildingname:[],
				addData: {
					id: 0,
					images: [],
					content: '', //备注信息
					tel: '', //电话
					address: '请选择保修地址',
					state:1,
					type: "请选择保修类型",
					typeName:"请选择保修类型",
					statename: "等待处理",
				}
			}
		},
		onLoad() {
			this.getrepairstypelist()
			this.getreqhouses()
		},
		methods: {
			async getreqhouses(){
				let res = await  houseCheck()
				// console.log(res);
				if(res.errCode==10000){
					this.buildingname = res.data.list
				}
			},
			async getrepairstypelist(){
				let res = await repairstypelist()
				// console.log(res);
				if(res.errCode==10000){
					this.typelist = res.data.list
				}
				
			},
			async add(){
				if(this.typelist==''){
					uni.showToast({
						title:'请选择保修类型',
						icon:'error'
					})
				}
				
				let res = await addrepairs(this.addData)
				if(res.errCode==10000){
					uni.showToast({
						title:'添加保修成功',
						icon:'success'
					})
					uni.navigateTo({
						url:'../repair'
					})
				}
			},
			changetype(e){
				// console.log(e);
				this.addData.typeName = this.typelist[e.detail.value].name
				this.addData.type = this.typelist[e.detail.value].id
			},
			changebuilding(e){
				this.addData.address = this.buildingname[e.detail.value].building
			},
			upload(data) {
				this.addData.images = data
				// console.log(data);
			},
			go() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="less">
	.box {
		.header {
			width: 730rpx;
			height: 125rpx;
			padding: 0 10rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;

			.header_left {
				image {
					width: 24rpx;
					height: 24rpx;
				}
			}

			.header_center {
				margin-left: 240rpx;
			}
		}

		.form {
			width: 730rpx;
			height: 640rpx;
			margin-left: 10rpx;

			.form_one {
				width: 100%;
				height: 105rpx;
				border-bottom: 1rpx solid #f0f0f0;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					margin-left: 10rpx;
				}

				.right {
					color: #898989;
					display: flex;

					input {
						font-size: 28rpx;
						width: 200rpx;
					}

					image {
						width: 15rpx;
						height: 24rpx;
						margin-right: 35rpx;
						margin-left: 20rpx;
						margin-top: 10rpx;
					}
				}
			}

			.text {
				width: 100%;
				height: 130rpx;

				textarea {
					width: 650rpx;
					height: 139rpx;
					border: 1rpx solid #ccc;
					margin: 0 19rpx;
					border-radius: 20rpx;
					padding: 20rpx;
					font-size: 28rpx;
				}
			}
		}
		.btu{
			width: 510rpx;
			height: 75rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 75rpx;
			font-size: 30rpx;
			background-color: #1f8fff;
			color: #fff;
			margin-left: 128rpx;
			margin-top: 60rpx;
		}
	}
</style>
